<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我的地址</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../default/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../default/css/index.css"/>
    <style>
        body {
            background: #f2f2f2;
        }

        .mui-content {
            background: #f2f2f2;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .cash-withdrawal-btn {
            width: auto;
            min-width: 100px;
            vertical-align: inherit;
        }

        .mui-content {
            padding-bottom: 50px;
        }

        /*覆盖样式*/

        .foot-btn-box {
            border-radius: 0;
            width: 100%;
            background-color: #ffdb28;
            line-height: 30px;
            height: 40px;
        }

        /*redio*/
        .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
            left: -40px !important;
            top: 20px !important;
        }

        .mui-radio h5 {
            line-height: 20px;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">我的地址</h1>
</header>

<div class="mui-content">
    <div>
        <ul id="OA_task_1" class="mui-table-view">

        </ul>
        <p class="red mui-text-center" style="font-size: 12px;margin-top: 20px">提示:地址左滑显示操作</p>
    </div>


    <button type="button"
            class="mui-btn mui-btn-danger cash-withdrawal-btn foot-btn-box mui-icon mui-icon-plusempty add-address-btn">
        新增地址
    </button>
</div>


<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<!---->
<!--<script src="../default/js/vconsole.js" type="text/javascript" charset="utf-8"></script>-->

<script>
    mui.init();
    // ajax地址

    mui("body").on('tap', '.add-address-btn', function () {
        mui.openWindow({
            url: 'add-address.html'
        });
    });


    // 获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        } else {
            return null;
        }
    }

    //获取url中的targetId参数
    var targetId = getUrlParam('targetId');
    console.log(targetId);

    $(function () {
        queryuseraddress();
    })

    function queryuseraddress() {
        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/ReceivingAddressController/queryUserAll',
            type: "post",
            dataType: "json",
            data: {userId: userId},
            success: function (data) {
                console.log(data);
                var html = '';
                data.data.forEach(function (value) {
                    html += '<li class="mui-table-view-cell mui-radio mui-left" data-address-id="' + value.id + '">\n' +
                        '                <div class="mui-slider-right mui-disabled">\n' +
                        '                    <a class="mui-btn mui-btn-yellow modify-address" data-modify-id="' + value.id + '">修改</a>\n' +
                        '                    <a class="mui-btn mui-btn-red remove-list-th" data-remove-id="' + value.id + '">删除</a>\n' +
                        '                </div>\n' +
                        '                <div class="mui-slider-handle mui-radio">\n' +
                        '                    <input name="radio" type="radio"><p><b>' + value.consigneeName + '</b><span>' + value.consigneeTelephone + '</span></p>\n' +
                        '                    <h5>' + value.addressName + value.detailedAddress + '</h5>\n' +
                        '                </div>\n' +
                        '            </li>'
                });
                $("#OA_task_1").html(html);
                mui.hideLoading();
            }, error: function () {
                mui.showLoading("发生错误,返回首页..", "div");
                setTimeout(function () {
                    window.location.href = 'http://newst.whilte.com/index.html';
                }, 1000)
            }
        });
    }


    (function ($) {
        //$.swipeoutOpen(el,direction)//打开指定列的滑动菜单，el:指定列的dom对象，direction：取值left|right，指定打开的是左侧或右侧滑动菜单
        //$.swipeoutClose(el);//关闭指定列的滑动菜单，el:指定列的dom对象
        //				setTimeout(function() {
        //					$.swipeoutOpen(document.getElementById("OA_task_1").querySelector('li:last-child'), 'left');
        //					setTimeout(function() {
        //						$.swipeoutClose(document.getElementById("OA_task_1").querySelector('li:last-child'));
        //					}, 1000);
        //				}, 1000);
        //第一个demo，拖拽后显示操作图标，点击操作图标删除元素；
        var btnArray = ['确认', '取消'];

        $('#OA_task_1').on('tap', '.remove-list-th', function (event) {
            var elem = this;
            var li = elem.parentNode.parentNode;
            var id = elem.getAttribute('data-remove-id');
            mui.confirm('确认删除该条记录？', '提示', btnArray, function (e) {
                mui.showLoading("正在加载..", "div");
                if (e.index == 0) {
                    $.ajax({
                        url: website + '/ReceivingAddressController/deleteReceivingAddress',
                        type: "post",
                        dataType: "json",
                        data: {id: id},
                        success: function (data) {
                            mui.hideLoading();
                            li.parentNode.removeChild(li);
                        }
                    });


                } else {
                    setTimeout(function () {
                        $.swipeoutClose(li);
                    }, 0);
                }
            });
        });

        mui('#OA_task_1').on('tap', '.modify-address', function () {
            var id = this.getAttribute('data-modify-id');
            mui.openWindow({
                url: 'add-address.html'
            });
        });

        mui('#OA_task_1').on('tap', '.mui-table-view-cell', function () {
            var addressId = this.getAttribute('data-address-id');
            localStorage.setItem("addressId", addressId);
            mui.openWindow({
                url: 'placeOrder.html',
            });
            console.log('你不该触发我的');
        });


    })(mui);


</script>
</body>
</html>